<template>
  <div>
    <ul class="imageList">
      <!-- 空气湿度 -->
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>空气湿度</span>
          </div>
          <!-- f放第一个图标-空气湿度-线形图 -->
          <!-- 我们使用 ref来找到 图表的div，获取的是真实的dom节点，避免报错，性能更好 -->
          <div class="chartArea" ref="chart1"></div>
        </el-card>
      </li>
      <!-- 光照 -->
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>光照</span>
          </div>
          <div class="chartArea" ref="chart2"></div>
        </el-card>
      </li>
      <!-- 气压 -->
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>气压</span>
          </div>
          <div class="chartArea" ref="chart3"></div>
        </el-card>
      </li>
      <!-- 土壤湿度 -->
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>土壤湿度</span>
          </div>
          <div class="chartArea" ref="chart4"></div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { $sensorCount } from "@/api";
export default {
  name: "Chart",
  data() {
    return {
      air: [], //空气
      beam: [], //光照
      pressure: [], //气压
      soil: [], //土壤湿度
    };
  },
  created() {
    this.getCount();
  },
  methods: {
    draw() {
      //获取标签
      this.chart1 = echarts.init(this.$refs.chart1);
      this.chart2 = echarts.init(this.$refs.chart2);
      this.chart3 = echarts.init(this.$refs.chart3);
      this.chart4 = echarts.init(this.$refs.chart4);
      let opt1 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.air,
            type: "line",
            smooth: true,
          },
        ],
      };
      let opt2 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.beam,
            type: "bar",
          },
        ],
      };
      let opt3 = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [10, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 7,
            },
            data: this.pressure,
          },
        ],
      };
      let opt4 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.soil,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.chart1.setOption(opt1);
      this.chart2.setOption(opt2);
      this.chart3.setOption(opt3);
      this.chart4.setOption(opt4)
    },
    getCount() {
      $sensorCount().then((res) => {
        console.log(res.data.data);
        let { air, beam, pressure, soil } = res.data.data;
        this.air = air;
        this.beam = beam;
        this.pressure = pressure;
        this.soil = soil;
        this.draw();
      });
    },
  },
};
</script>

<style scpped lang="less">
.imageList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 49.5%;
    padding-top: 10px;
  }
}
.chartArea {
  height: 220px;
}
</style>
